<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model.trim="keyWord"
      show-action
      shape="round"
      autofocus
      label="商品"
      background="pink"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- /搜索框 -->
    <!-- 历史记录 -->
    <div class="histories">
      <h3>历史记录</h3>
      <div class="historylists">
        <div class="historylist"
        v-for = 'item in searchHistories'
        :key="item"
        @click="changeKey(item)"
        > {{ item }} </div>
      </div>
    </div>
    <!-- /历史记录 -->
    <!-- 底部 -->
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
/*
缓存存取
存取 数组 （缓存只能存字符串  存JSON.stringify()  取 JSON.parse）
取：考虑 第一次取 (三目 判断 是不是 第一次（没有值），如果是 [])
存： 先取 parse变成数组 变量保存，操作变量，再将变量存回去
历史记录
  searchHis
*/
import MyTabbar from '@components/MyTabbar'
export default {
  data () {
    return {
      keyWord: '',
      searchHistories: localStorage.getItem('histories') ? JSON.parse(localStorage.getItem('histories')) : []
    }
  },
  // mounted () {
  //   console.log(this.searchHistories)
  // },
  methods: {
    // 点击历史记录改变input词
    changeKey (key) {
      this.keyWord = key
    },
    // 点击存储本地存储，跳转到搜索结果页
    onSearch () {
      let historyStore = localStorage.getItem('histories') ? JSON.parse(localStorage.getItem('histories')) : []
      // 判断搜索内容是否为空
      if (this.keyWord !== '') {
        // 存入最新搜索的一条记录
        historyStore.unshift(this.keyWord)
        // 数组去重
        historyStore = [...new Set(historyStore)]
        // 限制历史记录条数
        if (historyStore.length > 5) {
          historyStore.length = 5
        }
        // 出现报错，是因为存入本地存储是没有JSON.stringify
        localStorage.setItem('histories', JSON.stringify(historyStore))
        // 跳转到搜索结果页面
        this.$router.push({
          path: '/searchResult',
          query: {
            name: this.keyWord
          }
        })
      }
    }
  },
  components: {
    MyTabbar
  }
}
</script>

<style lang="scss" scoped>
.histories{
  padding: 0 20px;
  h3{
    color: #666;
  }
  .historylists{
    display: flex;
    line-height: 40px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
  }
  .historylist{
    margin:0 15px 15px 0;
    background-color: #eee;
    padding: 0 5px;
    border-radius: 5px;
  }
}
</style>
